@import 'base';
@vw :3.75vw;
@color:#fb7299;

header {
    position: fixed;
    top:0;
    left:0;
    padding:0 (12 / @vw) 0 (18 / @vw);
    width:100%;
    height:(84 / @vw);
    background-color: #fff;
    z-index: 1;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height:(44 / @vw);
        //------------------------ps
        // background-color: skyblue;
        
        .left {
            i {
                font-size: (28 / @vw);
                color:@color;
            }
        }

        .right {
            .login {
                width:(24 / @vw);
                height:(24 / @vw);
                margin-left: (14 / @vw);
            }
            .download {
                width: (72 / @vw);
                height:(24 / @vw);
                margin-left: (14 / @vw);
            }
        }
    }

    .bottom {
        display: flex;
        justify-content: space-between;
        height:(40 / @vw);
        border-bottom: 1px solid #939090;

        .right {
            a {
                display: block;
                width: (40 / @vw);
                height: (40 / @vw);
                // background-color: green;
                text-align: center;
                line-height: (40 / @vw);
                color:#939090;
            }
        }

        .left {

            ul {
                display: flex;
                line-height: (40 / @vw);
            }

            li {
                padding-right:(24 / @vw);
                a {
                    display: block;
                    height:10.4vw;
                    font-size:(14 / @vw);
                    &.active {
                        color:@color;
                        border-bottom: 1px solid #fb7299;
                    }
                }
            }

        }
    }
}

section {
    padding:(84 / @vw) (5 / @vw) 0 ;
    .vedio-list {
        display: flex;
        flex-wrap: wrap;
        a {
            width: 50%;
            padding: (8 / @vw) (5 / @vw);

            .pic {
                position: relative;
        
                .lib {
                    padding :(8 / @vw);
                    width: 100%;
                    position: absolute;
                    bottom:0;
                    left:0;
                    display: flex;
                    justify-content: space-between;
                    background-image: linear-gradient(
                        to top,rgba(0,0,0,.6),rgba(0,0,0,0)
                    );
                    
        
                    p {
                        color:#fff;
                        font-size: (12 / @vw);
                    }
                }
            }

            .txt {
                margin-top: (5 / @vw);
                padding: 0 (5 / @vw);
                p {
                    font-size: (12 / @vw);
                }
            }
        }
    }
}

footer {
    width: 100%;
    position: fixed;
    bottom:(20 / @vw);
    left:(18 / @vw);
    .box {
        width:90%;
        height:(30 / @vw);
        text-align: center;
        line-height:(30 / @vw) ;
        border-radius: (15 / @vw);
        color: #fff;
        background-color: @color;
    }
}